<template>
  <v-data-table :headers="headers" :items="desserts" sort-by="calories" class="elevation-1">
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>招聘计划申请</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-dialog v-model="dialog" max-width="800px">
          <template v-slot:activator="{ on }">
            <v-btn color="primary" dark class="mb-2" v-on="on">新增计划</v-btn>
          </template>
          <v-card>
            <v-card-title>
              <span class="headline">{{ formTitle }}</span>
            </v-card-title>

            <v-card-text>
              <v-container>
                <v-row>
                    <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.scenseq" label="场景码"></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.busse" label="场景名称"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.elements" label="解析要素"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.flgdc" label="借贷方向"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.accenmd" label="记账方式"></v-text-field>
                  </v-col>
                 
                  <v-col cols="12" sm="6" md="4">
                    <v-select :items="subsrcItems" label="科目来源" v-model="editedItem.subsrc"></v-select>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.busnoa" label="业务代号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.sernob" label="序号"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.orgSource" label="机构号来源"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.orgFlag" label="机构号标识"></v-text-field>
                  </v-col>
                   <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.orgId" label="机构号"></v-text-field>
                  </v-col>
                  <v-col cols="12" sm="6" md="4">
                    <v-text-field v-model="editedItem.amountExpression" label="金额表达式"></v-text-field>
                  </v-col>
                 
                </v-row>
              </v-container>
            </v-card-text>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn color="blue darken-1" text @click="close">取消</v-btn>
              <v-btn color="blue darken-1" text @click="save">保存</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-toolbar>
    </template>
    <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="deleteItem(item)">mdi-delete</v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize">Reset</v-btn>
    </template>
  </v-data-table>
</template>

<script>
export default {
  data: () => ({
    subsrcItems: ["产品", "科目好","内部账号"],
    dialog: false,
    headers: [
      {
        text: "场景码",
        align: "start",
        value: "scenseq"
      },
      { text: "场景名称", value: "busse" },
      { text: "解析要素", value: "elements" },
      { text: "借贷方向", value: "flgdc" },
      { text: "记账方式", value: "accenmd" },
      { text: "科目来源", value: "subsrc" },
       { text: "业务代号", value: "busnoa" },
        { text: "序号", value: "sernob" },
         { text: "机构号来源", value: "orgSource" },
          { text: "机构号标识", value: "orgFlag" },
           { text: "机构号", value: "orgId" },
            { text: "金额表达式", value: "amountExpression" },
      { text: "操作", value: "actions", sortable: false }
    ],
    desserts: [],
    editedIndex: -1,
    editedItem: {
      scenseq: "",
      busse: "",
      elements: "",
      flgdc: "",
      accenmd: "",
      subsrc: "",
      busnoa: "",
      sernob: "",
      orgSource: "",
      orgFlag: "",
      orgId: "",
      amountExpression: "",
    },
    defaultItem: {
      scenseq: "",
      busse: "",
      elements: "",
      flgdc: "",
      accenmd: "",
      subsrc: "",
      busnoa: "",
      sernob: "",
      orgSource: "",
      orgFlag: "",
      orgId: "",
      amountExpression: "",
    
     
    }
  }),

  computed: {
    formTitle() {
      return this.editedIndex === -1 ? "新增" : "修改";
    }
  },

  watch: {
    dialog(val) {
      val || this.close();
    }
  },

  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      this.desserts = [
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-16",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        },
        {
          createDate: "2020-05-17",
          company: "重庆分所",
          department: "一总三部",
          type: "社招",
          employeeCount: 3,
          postName: "审计业务岗",
          jobDescription: "岗位描述",
          requirement: "招聘要求"
        }
      ];
    },

    editItem(item) {
      this.editedIndex = this.desserts.indexOf(item);
      this.editedItem = Object.assign({}, item);
      this.dialog = true;
    },

    deleteItem(item) {
      const index = this.desserts.indexOf(item);
      confirm("Are you sure you want to delete this item?") &&
        this.desserts.splice(index, 1);
    },

    close() {
      this.dialog = false;
      this.$nextTick(() => {
        this.editedItem = Object.assign({}, this.defaultItem);
        this.editedIndex = -1;
      });
    },

    save() {
      if (this.editedIndex > -1) {
        Object.assign(this.desserts[this.editedIndex], this.editedItem);
      } else {
        this.desserts.push(this.editedItem);
      }
      this.close();
    }
  }
};
</script>